<template>
	<view>
		<view class="order-logistics">
			<view class="ns-border-color-gray nav">
				<view>
					<view v-for="(item, index) in goodsPacketList" :key="index" class="ns-text-color-gray" :class="index == currIndex ? 'select' : ''" @click="tapTab(index)">
						{{ item.packet_name }}
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-list-wrap">
				<view class="goods-list-img">
					<navigator v-for="(todo, index) in goodsPacketData.order_goods_list" :key="index" :url="'/pages/goods/detail/detail?goods_id=' + todo.goods_id">
						<image :src="$util.img(todo.picture_info.pic_cover_micro)" />
					</navigator>
				</view>
				<view v-if="goodsPacketData.is_express == 1">
					<view class="express-goods">
						<view class="ns-font-size-sm ns-text-color-gray">共{{ length }}个商品，由{{ goodsPacketData.express_name }}承运</view>
						<view class="ns-font-size-sm ns-text-color-gray">运单编号：{{ goodsPacketData.express_code }}</view>
					</view>
					<!-- JS动态查询物流信息 -->
					<view class="express-title ns-border-color-gray">物流跟踪</view>
					<view class="express-info">
						<view class="js-express-info ns-border-color-gray ul">
							<view v-for="(item, index) in orderExpressMessageList" :key="index" class="ns-border-color-gray li">
								<view :class="index == 0 ? 'ns-text-color' : ''">{{ item.AcceptStation }}</view>
								<view :class="index == 0 ? 'ns-text-color' : ''" class="accept-time">{{ item.AcceptTime }}</view>
								<view :class="index == 0 ? 'ns-text-color ns-bg-color' : 'ns-bg-color-gray'" class="dot ns-border-color"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-else-if="orderDetail.shipping_type == 3">
					<view class="express-goods ns-text-color-gray">
						<view class="ns-font-size-sm ns-text-color-gray">共{{ length }}个商品,本地配送</view>
						<view class="ns-font-size-sm ns-text-color-gray">运单编号：{{ orderDetail.distribution_info.express_no }}</view>
					</view>
					<view class="express-goods ns-text-color-gray other">
						<view>配送人员：{{orderDetail.distribution_info.order_delivery_user_name}}</view>
						<view>联系方式：{{orderDetail.distribution_info.order_delivery_user_mobile}}</view>
					</view>
				</view>
				<view v-else>
					<view class="express-goods ns-text-color-gray">
						<view class="ns-font-size-sm ns-text-color-gray">共{{ length }}个商品,无需物流</view>
						<view class="ns-font-size-sm ns-text-color-gray">运单编号：--</view>
					</view>
					<view class="express-goods ns-text-color-gray other">
						<view>物流跟踪：</view>
						<view>无物流信息</view>
					</view>
				</view>
			</view>
		</view>

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			goodsPacketList: [],
			orderExpressMessageList: [],
			orderId: 0,
			goodsPacketData: [],
			currIndex: 0,
			length: 0,
			orderDetail: []
		};
	},
	onLoad(e) {
		this.orderId = e.order_id;
		this.getList();
	},
	mixins: [http],
	methods: {
		getList() {
			this.sendRequest({
				url: 'System.Order.logistics',
				data: {
					order_id: this.orderId
				},
				success: res => {
					if (res.code == 0) {
						let list = res.data;
						this.orderDetail = list;
						this.goodsPacketList = list.goods_packet_list;
						this.goodsPacketData = list.goods_packet_list[this.currIndex];
						this.length = this.goodsPacketData.order_goods_list.length;
						this.getOrderExpressMessageList(this.goodsPacketData);
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		getOrderExpressMessageList(item) {
			if (parseInt(item.is_express)) {
				if (item.express_id != undefined) {
					this.sendRequest({
						url: 'System.Order.orderExpressMessageList',
						data: {
							express_id: item.express_id
						},
						success: res => {
							if (res.data.Success) {
								this.orderExpressMessageList = res.data.Traces;
							}
						}
					});
				}
			}
		},
		tapTab(index) {
			this.currIndex = index;
			this.getList();
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.order-logistics .nav {
	max-width: 640px;
	width: 100%;
	height: 42px;
	border-bottom: 1px solid;
	background-color: #fff;
	overflow: hidden;
}

.order-logistics .nav > view {
	position: relative;
	top: 0;
	z-index: 5;
	margin: 0 0.1rem;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.order-logistics .nav > view {
	display: flex;
}

.order-logistics .nav > view view {
	line-height: 80rpx;
	width: 24%;
}

.order-logistics .nav > view view.select {
	border-bottom: 2px solid $ns-border-color-gray;
}

.express-info {
	width: 100%;
	min-height: 100px;
	background-color: #fff;
	padding: 20px 0;
}

.express-info .ul {
	width: 92%;
	margin: 0 4%;
	border-left: 1px solid;
}

.express-info .ul .li {
	width: 96%;
	margin-left: 15px;
	border-bottom: 1px solid;
	position: relative;
	padding: 10px 0;
}

.express-info .ul .li:first-child {
	padding-top: 0;
}

.express-info .ul .li:last-child {
	border-bottom: none;
}

.express-info .ul .li .accept-time {
	font-size: 12px;
	line-height: 30px;
}

.express-info .ul .li .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	position: absolute;
	z-index: 5;
	left: -20px;
	top: 41%;
}

.express-info .ul .li:first-child .dot {
	top: 0;
	width: 12px;
	height: 12px;
	border: 2px solid;
	left: -21px;
}

.express-title {
	height: 40px;
	line-height: 40px;
	background: #fff;
	border-bottom: 1px solid;
	margin-top: 10px;
	padding-left: 10px;
}

.goods-list-wrap {
	margin-top: 20rpx;
}

.goods-list-img {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.goods-list-img image {
	width: 60px;
	height: 60px;
	margin-left: 10px;
}

image {
	max-width: 100%;
	height: auto;
}

.express-goods {
	line-height: 23px;
	padding: 7px;
	background-color: #fff;
}

.express-goods.other {
	margin-top: 10px;
}
</style>
